<template>
    <!--首页的 轮播帖设置-->
    <div>
        <!--顶部-->
        <el-row>
            <h1 class="center">轮播帖设置</h1>
        </el-row>
        <el-row class="add_btn">
            <el-col :span="2" :offset="14">
                <el-tooltip class="item" effect="light" content="添加一个轮播帖，新添加的帖子会排在最后哦~！" placement="bottom-start" >
                    <el-button type="primary" size="medium" @click="handleAdd()">添加</el-button>
                </el-tooltip>
            </el-col>
        </el-row>

        <!--主体滚动帖列表-->
        <el-row type="flex" justify="center">
            <el-col :span="21">
                <el-table
                        ref="barListTable"
                        tooltip-effect="light"
                        :data="list"
                        class="list">
                    <!--折叠信息列-->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="【 描述 】：">
                                    <span>{{ props.row.describe }}</span>
                                </el-form-item>
                                <el-form-item label="【 滚动图片 】：">
                                    <div class="block">
                                        <el-image
                                                style="width: 100px; height: 100px;"
                                                class="round_border"
                                                :src="GLOBAL.serverBaseUrl + GLOBAL.crsPostImg + props.row.images"
                                                :preview-src-list="[GLOBAL.serverBaseUrl + GLOBAL.crsPostImg + props.row.images]"
                                                fit="scale-down"></el-image>
                                    </div>
                                </el-form-item>
                                <el-form-item label="帖子标题：">
                                    <span>{{ props.row.post.title }}</span>
                                </el-form-item>
                                <el-form-item label="发表人昵称：">
                                    <span>{{ props.row.post.user.nickName }}</span>
                                </el-form-item>
                                <el-form-item label="帖子内容：">
                                    <el-tooltip :content="props.row.post.pure_content" placement="bottom" effect="light">
                                        <span class="over_show_point over_limit_line_3 font">{{ props.row.post.pure_content }}</span>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="跳转：">
                                    <el-link type="primary" @click="queryPost(props.row.post.id)">帖子详情</el-link>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="序号"
                            prop="showOrder"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            label="帖子编号"
                            width="100"
                            prop="post.id">
                    </el-table-column>
                    <el-table-column
                            label="标题"
                            width="180"
                            :show-overflow-tooltip="true"
                            prop="post.title">
                    </el-table-column>
                    <el-table-column
                            label="发表时间"
                            width="115"
                            prop="post.sdfTime"
                    >
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 5px">{{ scope.row.post.sdfTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="浏览量"
                            width="80"
                            prop="post.viewNum">
                    </el-table-column>
                    <el-table-column
                            label="回复量"
                            width="80"
                            prop="post.totalReplyNum">
                    </el-table-column>
                    <el-table-column
                                label="描述"
                                width="190"
                                :show-overflow-tooltip="true"
                                prop="describe">
                    </el-table-column>
                    <el-table-column
                            :resizable="false"
                            width="120"
                            align="right">
                        <template slot="header" slot-scope="// eslint-disable-next-line vue/no-unused-vars
                                                            scope">
                            <el-tooltip class="item" effect="light" content="调整顺序后点击“保存调整”按钮才会生效哦~！" placement="top">
                                <el-button @click="startEditingOrder" size="small" v-show="!orderEditing" type="primary" round>调整顺序</el-button>
                            </el-tooltip>
                            <el-button v-on:click="saveEditedOrder" size="small" v-show="orderEditing" type="success" round>保存调整</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button :disabled="!orderEditing || (scope.$index === 0)" size="small" @click="upOrder(scope.$index)" type="primary" icon="el-icon-top" circle></el-button>
                            <el-button :disabled="!orderEditing || (scope.$index === (list.length-1))" @click="downOrder(scope.$index)" size="small" type="primary" icon="el-icon-bottom" circle></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.row.id)">编辑</el-button>
                            <el-popconfirm title="确定删除该滚动帖设置吗？" v-on:confirm="handleDelete(scope.$index)">
                                <el-button
                                        slot="reference"
                                        size="mini"
                                        type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import $ from 'jquery';  /*引入jquery*/

    export default {
        name: "carouselSettingAdmin",
        data(){
            return{
                orderEditing: false, /* 正在调整顺序  true正在调整  false不在调整 */
                list: [], /*已有的滚动帖数组*/
                rules: {
                    name: [
                        { required: true, message: '请输入贴吧名称', trigger: 'blur' },
                        { min: 0, max: 30, message: '请输入有效的贴吧名称！', trigger: 'blur' },
                    ],
                    /*约束名必须和复选框绑定的数组名一致  此处是checkedCategories*/
                    checkedCategories: [
                        { type: 'array', required: true, message: '请至少选择一种贴吧类别', trigger: 'change' }
                    ],
                },
            }
        },
        created(){  /*页面加载时执行  显示已有的滚动帖列表*/

            /*如果是从编辑（添加页面跳转过来） 接收参数并提示结果  只接收一次，刷新页面不会重复接收*/
            if (this.$route.params.addSuccess != null){  /*从滚动帖编辑页转过来的 -- 添加成功*/
                this.$message({
                    showClose: true,
                    duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                    message: '滚动帖添加成功！',
                    type: 'success'
                });
            }else if(this.$route.params.updSuccess != null){ /*从滚动帖编辑页转过来的 -- 修改成功*/
                this.$message({
                    showClose: true,
                    duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                    message: this.$route.params.updSuccess,
                    type: 'success'
                });
            }

            /* 获取滚动帖列表（按照 showOrder 排列顺序来） */
            // this.$http.get("http://localhost:8081/postBar/getList").then(req=>{
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselGetDetailedList).then(req=>{
                if (req.data !== ""){
                    if (req.data.rs.result_code === 200){ /*查询成功   */
                        this.list = req.data.list;

                        // 处理 滚动帖对应帖子的发表时间
                        for (let i = 0; i < this.list.length; i++){
                            // 帖子发表时间
                            let pbTime = new Date(this.list[i].post.pbTime);
                            this.list[i].post.sdfTime = pbTime.getFullYear() + '-' + (pbTime.getMonth() + 1) + '-' + pbTime.getDate();
                        }
                    }else {  /*查询失败*/
                        this.$message({
                            showClose: true,
                            duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                            message: req.data.rs.msg,
                            type: 'error'
                        });
                    }
                }else {
                    this.$message.error('糟糕，服务器出事了。。');
                }
            })
        },
        mounted(){

        },
        methods: {

            /*已经 设置过按钮禁用状态，设置上移的至少是第二条； 设置下移的至少是倒数第二条*/
            /*调整滚动帖顺序  上移  -- 参数为要调整的元素在数组中的位置下标*/
            upOrder(index){
                // console.log( typeof index);
                /*将index - 1位置的元素  和 index 位置的元素 互换即可  -- 这里的修改会修改 this.list中的元素位置，但是不会同步顺序修改到 页面渲染上*/
                let tmp = this.list[index];
                this.list[index] = this.list[index-1];
                this.list[index-1] = tmp;

                /*通过下面的 重新赋值 就可以重新渲染*/
                let t = this.list;
                this.list = null;
                this.list = t;
            },
            /*调整滚动帖顺序  下移*/
            downOrder(index){
                console.log("downOrder:" + index);
                /*将index + 1位置的元素  和 index 位置的元素 互换即可  -- 这里的修改会修改 this.list中的元素位置，但是不会同步顺序修改到 页面渲染上*/
                let tmp = this.list[index];
                this.list[index] = this.list[index+1];
                this.list[index+1] = tmp;

                /*通过下面的 重新赋值 就可以重新渲染*/
                let t = this.list;
                this.list = null;
                this.list = t;
                console.log(this.list);
            },

            /* 新打开页面跳转至 输入的帖子id对应的帖子详情 点击 “查询帖子” 链接时触发*/
            queryPost(postId){
                let routeUrl = this.$router.resolve({
                    path: "/postInfo",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {pid: postId},
                });

                //以新标签页的方式打开
                window.open(routeUrl.href, "_blank");
            },

            /*开始编辑 滚动图顺序 点击表格头 “调整顺序时触发”*/
            startEditingOrder(){
                this.orderEditing = true;

            },

            /*保存编辑的 滚动图顺序 点击表格头 “保存调整”时触发*/
            saveEditedOrder(){
                // let formData = new FormData();
                // formData.append("crsList", this.list);

                // 前端直接传 对象数组（而不用封装到 formdata里）  后端用 @RequestBody 当作json对象来接就可以
                this.$http.patch(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselUpdOrder, this.list).then(req=>{
                // this.$http.patch(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselUpdOrder, crsList).then(req=>{
                // this.$http.patch(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselUpdOrder, formData).then(req=>{
                    if (req.data !== ""){
                        if (req.data.result_code === 200){ /*查询成功   */
                            this.$message({
                                showClose: true,
                                duration: 3000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'success'
                            });
                            // 由于只是在后端更正了数据（showOrder） 前端这边虽然列表行确实排序了，但是对象下面的 showOrder并没有改过来
                            // 需要更正一下 （前端页面第一列序号的修改、同时也不会影响下一次修改排序）
                            for (let i = 0; i < this.list.length; i++) {
                                this.list[i].showOrder = i+1;
                            }

                            // 退出编辑
                            this.orderEditing = false;
                        }else if (req.data.result_code === 322){  /*顺序无变化，无需调整*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'info'
                            });
                            // 退出编辑
                            this.orderEditing = false;
                        }else {  /*查询失败*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'error'
                            });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                })
            },

            /*设置为首页的推荐贴吧  点击按钮时触发*/
            // 将 新勾选的贴吧设为 推荐， 将去除勾选的贴吧 取消推荐
            setRecommend(){
                let recBarIds = []; //  要设置为 推荐贴吧的  贴吧id 构成的数组

                // 截取出 要设置为 推荐贴吧的 id 数组
                this.selectedRows.forEach(row => {
                    recBarIds.push(row.id);
                });

                // 请求后端， 进行贴吧推荐重设置
                let formData = new FormData();
                formData.append("barIds", recBarIds);
                this.$http.patch(this.GLOBAL.serverBaseUrl + this.GLOBAL.barSetRecommend, formData).then(req=>{
                    if (req.data !== ""){
                        if (req.data.result_code === 200){ /*设置成功  */
                            this.$message({
                                message: req.data.msg,
                                type: 'success'
                            });
                        }else {  /*设置失败(出现异常)*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'error'
                            });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },

            /*表格 左侧多选框 改变时触发的钩子函数  参数为 当前勾选的数据项（各行信息构成的数组）*/
            handleSelectionChange(val) {
                this.selectedRows = val;
                // console.log(this.selectedRows);
            },

            // 跳转到 贴吧置顶页面
            // 参数： 要管理的 贴吧id
            toSetTop(barId, barName){
                console.log("（置顶管理）贴吧id：" + barId);
                let routeUrl = this.$router.resolve({
                    path: "/admin/setTopAdmin",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {barId: barId, barName: barName},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleFileChange(file){
                console.log("handleFileChange123");
                //不知为什么， 在这里 直接file.type无法直接获取文件类型（undefined）， 不过可以 file.name 获取文件名
                var o = file.name;
                var pos=o.lastIndexOf('.');  //转义一下
                var fileType = o.substring(pos+1);
                fileType = fileType.toLowerCase(); //一律转为小写
                console.log("文件类型：" + fileType);

                const isJPG = (fileType === 'jpg' || fileType === 'png');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
                    return;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return;
                }
                this.postBarForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarSuccess(res, file) {
                alert("上传成功。");
                this.postBarForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarError(){
                alert("上传失败。");
            },
            add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formData = new FormData($('#postBarForm')[0]);  /*这里获取到的表单信息只有那个头像文件（只为他设置了name属性）*/
                        formData.append("name", this.postBarForm.name);
                        formData.append("checkedCategories", this.postBarForm.checkedCategories);
                        formData.append("describe", this.postBarForm.describe);

                        console.log("file:" + this.postBarForm.imageUrl);
                        // this.$http.post("http://localhost:8081/postBar/add", formData).then(req=>{
                        this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.barAdd, formData).then(req=>{
                            if (req.data !== ""){
                                if (req.data.result_code === 200){ /*添加成功   提示成功并刷新页面*/
                                    this.$router.push({name:'classifytmp', params:{fromPostBar: 'fromPostBar'}});
                                    this.$message({
                                        showClose: true,
                                        duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                        message: req.data.msg,
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        showClose: true,
                                        duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                        message: req.data.msg,
                                        type: 'error'
                                    });
                                    this.dialogVisible = false;  /*关闭对话框*/
                                }
                            }else {
                                this.$message.error('糟糕，服务器出事了。。');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                // console.log("array:" + this.postBarForm.checkedCategories);
            },
            /*添加一个滚动帖设置信息*/
            handleAdd(){
                // 跳转至 滚动帖 编辑页面
                let routeUrl = this.$router.resolve({
                    path: "/admin/carouselEdit",
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            },
            /*编辑一个滚动帖*/
            handleEdit(id){
                // 跳转至 滚动帖 编辑页面
                let routeUrl = this.$router.resolve({
                    path: "/admin/carouselEdit",
                    query: {crsId: id},
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");

            },
            /*删除一个贴滚动帖   参数为要删除滚动帖 在数组中的index  通过这个下标可以获得滚动帖id */
            handleDelete(index){
                // 判断当前滚动帖数量， 如果 <= 4 则不允许删除
                if (this.list.length <= 4){
                    this.$alert("为了提升用户体验，滚动帖数量应该 >= 4 哦 ~！", '警告', {
                        confirmButtonText: '确定',
                        type: 'warning',
                    });
                    return;
                }

                // 向后端请求删除帖子
                this.$http.delete(this.GLOBAL.serverBaseUrl + this.GLOBAL.carouselDel + "?crsId=" + this.list[index].id).then(req=>{
                    if (req.data !== ""){
                        if (req.data.result_code === 200){ /*删除成功   提示成功、重新调整序号并删除数组对应元素*/
                            // 重新调整序号（将当前调整元素后面的元素序号都-- 即可）
                            for (let i = index+1; i < this.list.length; i++) {
                                this.list[i].showOrder--;
                            }

                            // 删除数组中对应元素
                            this.list.splice(index, 1); // 从index 的位置 删除一个元素

                            // 提示结果信息
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'success'
                            });
                        }else {  /*删除失败*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'error'
                            });
                        }
                    }
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？关闭将清空已填信息。')
                    .then(() => {
                        this.clearPostBarForm(); //清空已填写的内容
                        done();
                    })
                    .catch(() => {});
            },
            clearPostBarForm(){ /*清空categoryForm(添加类别时的表单)   一般在添加类别时 点击取消或者关闭键*/
                this.postBarForm.name = '';
                this.postBarForm.imageUrl = '';
                this.postBarForm.checkedCategories = [];
                this.postBarForm.describe = '';
            },
        }
    }
</script>

<style scoped>
    h1{
        font-size: 34px;
    }


    /*添加分类按钮  row*/
    .add_btn{
        margin-top: 10px;
        margin-bottom: 23px;
    }

    /*贴吧的整个列表*/
    .list{
        padding-left: 25px;
        border-radius: 10px;
    }

</style>